<!--
 * @Author: Nend 758258389@qq.com
 * @Date: 2022-09-05 15:29:12
 * @LastEditors: Nend 758258389@qq.com
 * @LastEditTime: 2022-09-08 15:01:47
 * @FilePath: \phase3-front-new\src\components\MoneyManager\bank.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-box">
    <!--逻辑1-->
    <div class="block">
      <el-dropdown split-button type="primary" @command="logic1Change">
        <span v-if="this.logic1 == null">逻辑1</span>
        <span v-else>{{ logic1 }}</span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="gt">大于</el-dropdown-item>
          <el-dropdown-item command="lt">小于</el-dropdown-item>
          <el-dropdown-item command="eq">等于</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown split-button type="primary" @command="condition1Change">
        <span v-if="this.condition1 == null">条件1</span>
        <span v-else>{{ condition1 }}</span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="bankId">银行账户ID</el-dropdown-item>
          <el-dropdown-item command="leftMoney">剩余金额</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!--条件1输入框，v-model:双间语法糖，能够自动绑定属性的值-->
      <el-input v-model="input1" placeholder="条件1输入" style="width:175px" @input="input1Change"></el-input>


      <el-dropdown split-button type="primary" @command="logic2Change">
        <span v-if="this.logic2 == null">逻辑2</span>
        <span v-else>{{ logic2 }}</span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="gt">大于</el-dropdown-item>
          <el-dropdown-item command="lt">小于</el-dropdown-item>
          <el-dropdown-item command="eq">等于</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown split-button type="primary" @command="condition2Change">
        <span v-if="this.condition2 == null">条件2</span>
        <span v-else>{{ condition2 }}</span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="bankId">银行账户ID</el-dropdown-item>
          <el-dropdown-item command="leftMoney">剩余金额</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!--条件2输入框-->
      <el-input v-model="input2" placeholder="条件2输入" style="width:175px"></el-input>

      &nbsp;&nbsp;&nbsp;
      <!--按钮-->
      <el-button
        type="success"
        icon="el-icon-check"
        circle
        @click="handleConditionSearch"
      ></el-button>
      <el-button
        type="danger"
        icon="el-icon-delete"
        circle
        @click="handleDeleteCondition"
      ></el-button>
    </div>
    <br />
    <!--显示内容-->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="bankId" label="账号ID" width="150">
      </el-table-column>
      <el-table-column prop="leftMoney" label="剩余金额" width="300">
      </el-table-column>

      <el-table-column fixed="right" label="详细操作" width="300">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="block">
      <span class="demonstration"></span>
      <br />
      <br />
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currPage"
        :page-sizes="[2, 3, 4, 5, 6]"
        :page-size="currPageSize"
        layout="sizes, prev, pager, next"
        :total="totalNum"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      // 分页结果信息
      totalNum: 1,
      totalPages: 1,
      currPage: 1,
      currPageSize: 2,
      tableData: [],
      // 条件信息
      logic1: null,
      logic1Value:null,
      logic2: null,
      logic2Value:null,
      condition1: null,
      condition2: null,
      // 条件查询
      bank: {
        bankId: null,
        leftMoney: null,
        bankIdJudgeType: null,
        leftMoneyJudgeType: null,
      },
      // 条件输入值
      input1: null,
      input2: null,
      // 分页
      pageInfo: {
        pageNum: 1,
        pageSize: 3,
        bank: null,
      },
    };
  },

  created() {
    this.toGetBanksInfo();
  },

  methods: {
    handleClick(row) {
      console.log(row);
    },
    toGetBanksInfo() {
      /**
       * todo 后面这里或许可以使用缓存 存储信息,特别是更改了页面显示数据的数量的时候
       * todo 如果不设置缓存，访问次数会爆炸
       *  */
      this.$http.post("/bank/search", this.pageInfo).then((resp) => {
        if(resp.code === "200"){
          this.$message("查询成功");
          console.log(resp);
        // 下一步：获取resp里面的内容，展现到页面上
        this.tableData = resp.data[0];
        this.totalNum = resp.data[1];
        this.totalPages = resp.data[2];
        this.currPage = resp.data[3];
        this.currPageSize = resp.data[4];
        }else{
          this.$message("系统维护中...")
        }

      });
    },
    // 带条件查询
    getInfoByAny(pageInfo){
      this.$http.post("/bank/search",pageInfo).then((resp) => {
        if(resp.code === "200"){
          this.$message("查询成功");
        console.log(resp);
        // 下一步：获取resp里面的内容，展现到页面上
        this.tableData = resp.data[0];
        this.totalNum = resp.data[1];
        this.totalPages = resp.data[2];
        this.currPage = resp.data[3];
        this.currPageSize = resp.data[4];
      }else{
          this.$message("系统维护中...")
        }
      });
    },


    // 分页处理方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      console.log(this.pageInfo.pageSize);
      this.toGetBanksInfo();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageInfo.pageNum = val;
      console.log(this.pageInfo.pageNum);
      this.toGetBanksInfo();
    },

    // 逻辑1改变时的变化
    logic1Change(command) {
      this.logic1Value = command;
      if (command == "gt") {
        this.logic1 = "大于";
      } else if (command == "lt") {
        this.logic1 = "小于";
      } else {
        this.logic1 = "等于";
      }
      (this.condition1 != null && this.condition1 == "银行账户ID") ? this.bank.bankIdJudgeType = command : this.bank.leftMoneyJudgeType = command;
      console.log(this.logic1Value);
    },
    // 逻辑2改变时的变化
    logic2Change(command) {
      this.logic2Value = command;
      if (command == "gt") {
        this.logic2 = "大于";
      } else if (command == "lt") {
        this.logic2 = "小于";
      } else {
        this.logic2 = "等于";
      }
      (this.condition2 != null && this.condition2 == "银行账户ID") ? this.bank.bankIdJudgeType = command : this.bank.leftMoneyJudgeType = command;

      console.log(this.logic2Value);
    },
    // 条件1改变时的变化，为了避免后台错误，如果条件发生了更改，则对应的逻辑也会默认为小于
    condition1Change(command) {
      console.log(command);
      if (command == "bankId") {
        if (this.condition2 == "银行账户ID") {
          this.$message("条件重复，请重新选择");
        } else {
          this.condition1 = "银行账户ID";
          this.logic1 = this.logic1 == null ? "小于" : this.logic1;
          this.logic1Value = "lt";
          this.bank.bankIdJudgeType = this.logic1Value;
        }
      } else if (command == "leftMoney") {
        if (this.condition2 == "剩余金额") {
          this.$message("条件重复，请重新选择");
        } else {
          this.condition1 = "剩余金额";
          this.logic1 = this.logic1 == null ? "小于" : this.logic1;
          this.logic1Value = "lt";
          this.bank.leftMoneyJudgeType = this.logic1Value;
        }
        console.log(this.logic1Value);
      }
    },

    // 条件1输入框输入值后
    input1Change(){
      console.log(this.input1);
      
    },
    // 条件2改变时的变化
    condition2Change(command) {
      console.log(command);
      if (command == "bankId") {
        if (this.condition1 == "银行账户ID") {
          this.$message("条件重复，请重新选择");
        } else {
          this.condition2 = "银行账户ID";
          this.logic2 = this.logic2 == null ? "小于" : this.logic2;
          this.bank.bankIdJudgeType=this.logic2;
          this.logic2Value = "lt";
          this.bank.bankIdJudgeType = this.logic2Value;
        }
      } else if (command == "leftMoney") {
        if (this.condition1 == "剩余金额") {
          this.$message("条件重复，请重新选择");
        } else {
          this.condition2 = "剩余金额";
          this.logic2 = this.logic2 == null ? "小于" : this.logic2;
          this.bank.leftMoneyJudgeType=this.logic2;
          this.logic2Value = "lt";
          this.bank.leftMoneyJudgeType = this.logic2Value;

        }
        console.log(this.logic2Value);
      }
    },

    // 条件查询
    handleConditionSearch() {
      // 判断
      if (this.condition1 == null && condition2 == null) {
        this.toGetBanksInfo();
        return;
      }
      if(this.condition1 != null && (this.input1==null || this.input1 == "")){
        this.$message("请输入对应的条件值");
        return;
      }
      if(this.condition2 != null && (this.input2==null || this.input2 == "")){
        this.$message("请输入对应的条件值");
        return;
      }
      // 赋值
      if(this.condition1 === "银行账户ID"){
        this.bank.bankId = parseInt(this.input1);
      }else{
        this.bank.leftMoney = parseFloat(this.input1);
      }
      if(this.condition2 === "银行账户ID"){
        this.bank.bankId =parseInt(this.input2);
      }else{
        this.bank.leftMoney = parseFloat(this.input2);
      }
      // 给bankInfo赋值
      this.pageInfo.bank = this.bank;
      // 调用请求方法
      // console.log(this.pageInfo);
      this.getInfoByAny(this.pageInfo);
    },

    // 删除条件
    handleDeleteCondition() {
      this.logic1 = null;
      this.logic2 = null;
      this.condition1 = null;
      this.condition2 = null;
      this.logic1Value=null,
      this.logic2Value=null,
      this.bank = {
        bankId: null,
        leftMoney: null,
        bankIdJudgeType: null,
        leftMoneyJudgeType: null,
      };
      this.input1 = null;
      this,input2= null;
      this.pageInfo = {
        pageNum: 1,
        pageSize: 3,
        bank: null,
      };
      this.$message("条件清除成功");
    },
  },
};
</script>
